<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            display: flex;
        }

        li {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid;
            text-align: center;
            line-height: 50px;
            color: #fff;
            background-color: skyblue;
        }

        li:not(:last-child) {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 中奖 -->
    <ul class="luckyUl"></ul>
    <!-- 机选 -->
    <ul class="computerUl"></ul>

    <h3 id="result"></h3>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        let luckyUl = document.querySelector('.luckyUl'); // 中奖
        let computerUl = document.querySelector('.computerUl'); // 机选 

        function create() {
            let arr = [];
            for (let i = 1; i <= 33; i++) {
                arr.push(i);
            }
            // let result = _.sampleSize(arr, 6);

            // 排序
            // result = _.orderBy(result);

            let result = _.chain(arr).sampleSize(6).orderBy().value();
            let number = _.random(1, 16);
            return [result, number];
        }
        let [luckyReds, luckyBlue] = create(); // 中奖
        let [computerReds, computerBlue] = create(); //  机选 

        let count = _.intersection(luckyReds, computerReds).length; // 交集

        var compiled;
        compiled = _.template('<% _.forEach(luckyReds, function(user) { %><li><%- user %></li><% }); %>');
        luckyUl.innerHTML = compiled(luckyReds);
        compiled = _.template('<li><%= number %>');
        luckyUl.innerHTML += compiled({ 'number': luckyBlue });

        compiled = _.template('<% _.forEach(computerReds, function(user) { %><li><%- user %></li><% }); %>');
        computerUl.innerHTML = compiled(computerReds);
        compiled = _.template('<li><%= number %>');
        computerUl.innerHTML += compiled({ 'number': computerBlue });


    </script>
</body>

</html>